<!DOCTYPE html>
<html lang="zh">
<head>
		<meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="../../util/photo/css/style.css" />
		<!--<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />-->
		<!--<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css' />-->
		<link rel="stylesheet" href="../../util/bootstrap-3.3.7-dist/css/bootstrap.css">
		<script src="../../util/jquery-3.4.0.js"></script>
		<script src="../../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<script type="text/javascript" src="../../util/photo/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../../util/photo/js/jquery.masonry.min.js"></script>
		<script type="text/javascript" src="../../util/photo/js/jquery.easing.1.3.js"></script>
    </head>
<body>
	<div class=" container">
		<!--头部-->
		<header class="row">
			<h1 class="col-lg-12 col-md-12 text-center">A silent world</h1>
			<!--<a href="javascript:;" data-toggle="modal" data-target="#myModal"><span class="iconfont icon-jia"></span></a>-->
			<button class="btn _lxmbtn col-lg-1 col-md-1 text-right col-md-offset-11" data-toggle="modal" data-target="#_lxmModa1">我要发布</button>
		</header>
		<!--内容展示-->
		<div class="content row">
			<div class="iw_wrapper col-lg-12 col-md-12 text-center">
				<ul class="iw_thumbs" id="iw_thumbs">
					<li><img src="../../util/photo/images/thumbs/1.jpg" data-img="../../util/photo/images/full/1.jpg" alt="Thumb1"/><div><h2>蓝天班</h2><p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/2.jpg" data-img="../../util/photo/images/full/2.jpg" alt="Thumb2"/><div><h2>黑土班</h2><p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/3.jpg" data-img="../../util/photo/images/full/3.jpg" alt="Thumb3"/><div><h2>旅行班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/4.jpg" data-img="../../util/photo/images/full/4.jpg" alt="Thumb4"/><div><h2>superclass</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/5.jpg" data-img="../../util/photo/images/full/5.jpg" alt="Thumb5"/><div><h2>小草班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/6.jpg" data-img="../../util/photo/images/full/6.jpg" alt="Thumb6"/><div><h2>牛牛班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/7.jpg" data-img="../../util/photo/images/full/7.jpg" alt="Thumb7"/><div><h2>星星班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/8.jpg" data-img="../../util/photo/images/full/8.jpg" alt="Thumb8"/><div><h2>蓝天班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/9.jpg" data-img="../../util/photo/images/full/9.jpg" alt="Thumb9"/><div><h2>小草班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/10.jpg" data-img="../../util/photo/images/full/10.jpg" alt="Thumb10"/><div><h2>星星班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/11.jpg" data-img="../../util/photo/images/full/11.jpg" alt="Thumb11"/><div><h2>小草班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/12.jpg" data-img="../../util/photo/images/full/12.jpg" alt="Thumb12"/><div><h2>蓝天班</h2><p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/13.jpg" data-img="../../util/photo/images/full/13.jpg" alt="Thumb13"/><div><h2>星星班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/14.jpg" data-img="../../util/photo/images/full/14.jpg" alt="Thumb14"/><div><h2>蓝天班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/15.jpg" data-img="../../util/photo/images/full/15.jpg" alt="Thumb15"/><div><h2>superclass</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/16.jpg" data-img="../../util/photo/images/full/16.jpg" alt="Thumb16"/><div><h2>17届2班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/17.jpg" data-img="../../util/photo/images/full/17.jpg" alt="Thumb17"/><div><h2>superclass</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/18.jpg" data-img="../../util/photo/images/full/18.jpg" alt="Thumb18"/><div><h2>牛牛班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/19.jpg" data-img="../../util/photo/images/full/19.jpg" alt="Thumb19"/><div><h2>superclass</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/20.jpg" data-img="../../util/photo/images/full/20.jpg" alt="Thumb20"/><div><h2>星星班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/21.jpg" data-img="../../util/photo/images/full/21.jpg" alt="Thumb21"/><div><h2>旅行班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/22.jpg" data-img="../../util/photo/images/full/22.jpg" alt="Thumb22"/><div><h2>旅行班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/23.jpg" data-img="../../util/photo/images/full/23.jpg" alt="Thumb23"/><div><h2>星星班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/24.jpg" data-img="../../util/photo/images/full/24.jpg" alt="Thumb24"/><div><h2>旅行班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/25.jpg" data-img="../../util/photo/images/full/25.jpg" alt="Thumb25"/><div><h2>星星班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/26.jpg" data-img="../../util/photo/images/full/26.jpg" alt="Thumb26"/><div><h2>小草班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/27.jpg" data-img="../../util/photo/images/full/27.jpg" alt="Thumb27"/><div><h2>牛牛班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/28.jpg" data-img="../../util/photo/images/full/28.jpg" alt="Thumb28"/><div><h2>小草班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/29.jpg" data-img="../../util/photo/images/full/29.jpg" alt="Thumb29"/><div><h2>牛牛班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/20.jpg" data-img="../../util/photo/images/full/30.jpg" alt="Thumb30"/><div><h2>旅行班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/31.jpg" data-img="../../util/photo/images/full/31.jpg" alt="Thumb31"/><div><h2>小草班</h2><p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/32.jpg" data-img="../../util/photo/images/full/32.jpg" alt="Thumb32"/><div><h2>小草班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/33.jpg" data-img="../../util/photo/images/full/33.jpg" alt="Thumb33"/><div><h2>黑土班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/34.jpg" data-img="../../util/photo/images/full/34.jpg" alt="Thumb34"/><div><h2>旅行班</h2><p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/35.jpg" data-img="../../util/photo/images/full/35.jpg" alt="Thumb35"/><div><h2>旅行班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
					<li><img src="../../util/photo/images/thumbs/36.jpg" data-img="../../util/photo/images/full/36.jpg" alt="Thumb36"/><div><h2>黑土班</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>
				</ul>
			</div>
			<div id="iw_ribbon" class="iw_ribbon">
				<span class="iw_close"></span>
				<span class="iw_zoom">点击图片放大</span>
			</div>
		</div>
		<!--弹框-->
		<div id="frame">
			<div class="modal fade" id="_lxmModa1" tabindex="-1" role="dialog" aria-labelledby="_lxmModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="_lxmModalLabel">照片分享</h4>
						</div>
						<div class="modal-body form-inline">
							<!--标题-->
							<p class="row">
								<label class="col-md-2 col-lg-2 text-center">标题：</label>
								<input type="text" class="form-control col-md-4 col-lg-4 text-center" id="_lxmtitle" placeholder="最多四个字">
							</p>
							<!-- 添加照片-->
							<div class="row _lxmuploadphoto">
								<label class="col-md-2 col-lg-2 text-center">照片：</label>
								<input type="file" id="_lxmf1" class="col-lg-2,col-md-2 text-right">
								<ul id="_lxmul1" class="col-md-12 col-lg-12">
									<!--<li><img src="xxxxx" alt=""></li>-->
								</ul>
							</div>
							<!--上传按钮-->
							<p class="row">
								<label class="col-md-2 col-lg-2 text-center">上传：</label>
								<button  class="btn btn-default" id="_lxmphoto">
									<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
								</button>
							</p>
							<!--描述-->
							<p class="row">
								<label class="col-md-2 col-lg-2 text-center">描述：</label>
								<input class="form-control" id="_lxmdescribe" placeholder="少于40字">
							</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" id="_lxmcl" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" id="_lxmup">发布</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
	<!--插件-->
	<script type="text/javascript">

        $(window).load(function(){
            var $iw_thumbs			= $('#iw_thumbs'),
                $iw_ribbon			= $('#iw_ribbon'),
                $iw_ribbon_close	= $iw_ribbon.children('span.iw_close'),
                $iw_ribbon_zoom		= $iw_ribbon.children('span.iw_zoom');

            ImageWall	= (function() {
                // window width and height
                var w_dim,
                    // index of current image
                    current				= -1,
                    isRibbonShown		= false,
                    isFullMode			= false,
                    // ribbon / images animation settings
                    ribbonAnim			= {speed : 500, easing : 'easeOutExpo'},
                    imgAnim				= {speed : 400, easing : 'jswing'},
                    // init function : call masonry, calculate window dimentions, initialize some events
                    init				= function() {
                        $iw_thumbs.imagesLoaded(function(){
                            $iw_thumbs.masonry({
                                isAnimated	: true
                            });
                        });
                        getWindowsDim();
                        initEventsHandler();
                    },
                    // calculate window dimentions
                    getWindowsDim		= function() {
                        w_dim = {
                            width	: $(window).width(),
                            height	: $(window).height()
                        };
                    },
                    // initialize some events
                    initEventsHandler	= function() {

                        // click on a image
                        $iw_thumbs.delegate('li', 'click', function() {
                            if($iw_ribbon.is(':animated')) return false;

                            var $el = $(this);

                            if($el.data('ribbon')) {
                                showFullImage($el);
                            }
                            else if(!isRibbonShown) {
                                isRibbonShown = true;

                                $el.data('ribbon',true);

                                // set the current
                                current = $el.index();

                                showRibbon($el);
                            }
                        });

                        // click ribbon close
                        $iw_ribbon_close.bind('click', closeRibbon);

                        // on window resize we need to recalculate the window dimentions
                        $(window).bind('resize', function() {
                            getWindowsDim();
                            if($iw_ribbon.is(':animated'))
                                return false;
                            closeRibbon();
                        })
                            .bind('scroll', function() {
                                if($iw_ribbon.is(':animated'))
                                    return false;
                                closeRibbon();
                            });

                    },
                    showRibbon			= function($el) {
                        var	$img	= $el.children('img'),
                            $descrp	= $img.next();

                        // fadeOut all the other images
                        $iw_thumbs.children('li').not($el).animate({opacity : 0.2}, imgAnim.speed);

                        // increase the image z-index, and set the height to 100px (default height)
                        $img.css('z-index', 100)
                            .data('originalHeight',$img.height())
                            .stop()
                            .animate({
                                height 		: '100px'
                            }, imgAnim.speed, imgAnim.easing);

                        // the ribbon will animate from the left or right
                        // depending on the position of the image
                        var ribbonCssParam 		= {
                                top	: $el.offset().top - $(window).scrollTop() - 6 + 'px'
                            },
                            descriptionCssParam,
                            dir;

                        if( $el.offset().left < (w_dim.width / 2) ) {
                            dir = 'left';
                            ribbonCssParam.left 	= 0;
                            ribbonCssParam.right 	= 'auto';
                        }
                        else {
                            dir = 'right';
                            ribbonCssParam.right 	= 0;
                            ribbonCssParam.left 	= 'auto';
                        }

                        $iw_ribbon.css(ribbonCssParam)
                            .show()
                            .stop()
                            .animate({width : '100%'}, ribbonAnim.speed, ribbonAnim.easing, function() {
                                switch(dir) {
                                    case 'left' :
                                        descriptionCssParam		= {
                                            'left' 			: $img.outerWidth(true) + 'px',
                                            'text-align' 	: 'left'
                                        };
                                        break;
                                    case 'right' :
                                        descriptionCssParam		= {
                                            'left' 			: '-200px',
                                            'text-align' 	: 'right'
                                        };
                                        break;
                                };
                                $descrp.css(descriptionCssParam).fadeIn();
                                // show close button and zoom
                                $iw_ribbon_close.show();
                                $iw_ribbon_zoom.show();
                            });

                    },
                    // close the ribbon
                    // when in full mode slides in the middle of the page
                    // when not slides left
                    closeRibbon			= function() {
                        isRibbonShown 	= false

                        $iw_ribbon_close.hide();
                        $iw_ribbon_zoom.hide();

                        if(!isFullMode) {

                            // current wall image
                            var $el	 		= $iw_thumbs.children('li').eq(current);

                            resetWall($el);

                            // slide out ribbon
                            $iw_ribbon.stop()
                                .animate({width : '0%'}, ribbonAnim.speed, ribbonAnim.easing);

                        }
                        else {
                            $iw_ribbon.stop().animate({
                                opacity		: 0.8,
                                height 		: '0px',
                                marginTop	: w_dim.height/2 + 'px' // half of window height
                            }, ribbonAnim.speed, function() {
                                $iw_ribbon.css({
                                    'width'		: '0%',
                                    'height'	: '126px',
                                    'margin-top': '0px'
                                }).children('img').remove();
                            });

                            isFullMode	= false;
                        }
                    },
                    resetWall			= function($el) {
                        var $img		= $el.children('img'),
                            $descrp		= $img.next();

                        $el.data('ribbon',false);

                        // reset the image z-index and height
                        $img.css('z-index',1).stop().animate({
                            height 		: $img.data('originalHeight')
                        }, imgAnim.speed,imgAnim.easing);

                        // fadeOut the description
                        $descrp.fadeOut();

                        // fadeIn all the other images
                        $iw_thumbs.children('li').not($el).animate({opacity : 1}, imgAnim.speed);
                    },
                    showFullImage		= function($el) {
                        isFullMode	= true;

                        $iw_ribbon_close.hide();

                        var	$img	= $el.children('img'),
                            large	= $img.data('img'),

                            // add a loading image on top of the image
                            $loading = $('<span class="iw_loading"></span>');

                        $el.append($loading);

                        // preload large image
                        $('<img/>').load(function() {
                            var $largeImage	= $(this);

                            $loading.remove();

                            $iw_ribbon_zoom.hide();

                            resizeImage($largeImage);

                            // reset the current image in the wall
                            resetWall($el);

                            // animate ribbon in and out
                            $iw_ribbon.stop().animate({
                                opacity		: 1,
                                height 		: '0px',
                                marginTop	: '63px' // half of ribbons height
                            }, ribbonAnim.speed, function() {
                                // add the large image to the DOM
                                $iw_ribbon.prepend($largeImage);

                                $iw_ribbon_close.show();

                                $iw_ribbon.animate({
                                    height 		: '100%',
                                    marginTop	: '0px',
                                    top			: '0px'
                                }, ribbonAnim.speed);
                            });
                        }).attr('src',large);

                    },
                    resizeImage			= function($image) {
                        var widthMargin		= 100,
                            heightMargin 	= 100,

                            windowH      	= w_dim.height - heightMargin,
                            windowW      	= w_dim.width - widthMargin,
                            theImage     	= new Image();

                        theImage.src     	= $image.attr("src");

                        var imgwidth     	= theImage.width,
                            imgheight    	= theImage.height;

                        if((imgwidth > windowW) || (imgheight > windowH)) {
                            if(imgwidth > imgheight) {
                                var newwidth 	= windowW,
                                    ratio 		= imgwidth / windowW,
                                    newheight 	= imgheight / ratio;

                                theImage.height = newheight;
                                theImage.width	= newwidth;

                                if(newheight > windowH) {
                                    var newnewheight 	= windowH,
                                        newratio 		= newheight/windowH,
                                        newnewwidth 	= newwidth/newratio;

                                    theImage.width 		= newnewwidth;
                                    theImage.height		= newnewheight;
                                }
                            }
                            else {
                                var newheight 	= windowH,
                                    ratio 		= imgheight / windowH,
                                    newwidth 	= imgwidth / ratio;

                                theImage.height = newheight;
                                theImage.width	= newwidth;

                                if(newwidth > windowW) {
                                    var newnewwidth 	= windowW,
                                        newratio 		= newwidth/windowW,
                                        newnewheight 	= newheight/newratio;

                                    theImage.height 	= newnewheight;
                                    theImage.width		= newnewwidth;
                                }
                            }
                        }

                        $image.css({
                            'width'			: theImage.width + 'px',
                            'height'		: theImage.height + 'px',
                            'margin-left'	: -theImage.width / 2 + 'px',
                            'margin-top'	: -theImage.height / 2 + 'px'
                        });
                    };

                return {init : init};
            })();

            ImageWall.init();
        });
	</script>
	<!--上传图片弹框-->
	<script>
        var oF=document.getElementById('_lxmf1');
        var oBtn=document.querySelector('#_lxmphoto');
        var oUl=document.getElementById('_lxmul1');
        let oTitle=document.getElementById('_lxmtitle');//标题
        let aDescribe=document.getElementById('_lxmdescribe');//描述
         let aUpload=document.getElementById('_lxmup');//发布
         let aCloses=document.getElementById('_lxmcl');//关闭
        let aThumbs=document.getElementById('iw_thumbs');//照片展现的ul
        let odiv1=document.getElementById('frame');//弹框大盒子
        let n=0,Thumb;
		oBtn.onclick=function () {
            /*创建一个文件阅读器*/
            var oFReader = new FileReader();
            /*获取文件，因为可以上传多个，所以是数组，咱们获取第一个就可以了*/
            var file = oF.files[0];
            //*通过文件阅读器,解析uRL地址，并且转化成base64格式*/
            oFReader.readAsDataURL(file);
            //*等文件阅读器加载完毕的时候*/
            oFReader.onloadend = function(ev){
                //*或者目标文件的解析结果*/
                var src = ev.target.result;
                //*创建，插入*/
                var oLi=document.createElement('li');
                let aLi=document.createElement('li');
                let adiv=document.createElement('div');
                let ah2=document.createElement('h2');
                let ap=document.createElement('p');
                //弹框中的li
                oLi.innerHTML='<img src="'+src+'">';
                //页面中的照片
                aLi.innerHTML='<img src="'+src+'" data-img="'+src+'" alt="'+Thumb+'+'+n+'"/>';
                //将弹框中的标题付给页面中h2元素
                ah2.innerHTML=oTitle.value;
                //将弹框中的描述付给页面中p元素
                ap.innerHTML=aDescribe.value;
                //将li存在弹框的ul
                oUl.appendChild(oLi);
                //将li存在页面的ul
                aThumbs.appendChild(aLi);
                //将div放在页面的
                 aLi.appendChild(adiv);
                 //将p与h2放在
                adiv.appendChild(ah2);
                adiv.appendChild(ap);
                aUpload.onclick=function () {
					odiv1.style.display='none';
					document.querySelector(".modal-backdrop").style.display = 'none'
                };
                aCloses.onclick=function () {
                    adiv.removeChild(ap);
                    adiv.removeChild(ah2);
                    aLi.removeChild(adiv);
                    aThumbs.removeChild(aLi);
                };

            };
        };
	</script>
</html>